<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/9/11
  Time: 17:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/include.jsp" %>
<html>
<head>
    <title>Title</title>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-content">

                    <div class="jqGrid_wrapper">
                        <div class="ui-jqgrid " id="gbox_table_list_2" dir="ltr">
                            <div class="ui-jqgrid-view table-responsive" role="grid" id="gview_table_list_2"
                            >


                                <button id="addBtn" type="submit" class="btn btn-primary">增加产品</button>
                                </button><br>


                                <div class="ui-jqgrid-bdiv">
                                    <div style="position:relative;margin-top: 5px">

                                        <table id="cusTable"
                                               class="ui-jqgrid-btable ui-common-table table table-bordered"
                                        >
                                            <tbody>
                                            <tr role="row" style="background: #F5F5F5;">
                                                <td>编号
                                                </td>
                                                <td>产品
                                                </td>
                                                <td>状态
                                                </td>
                                                <td>操作
                                                </td>
                                            </tr>

                                            <c:forEach items="${productList}" var="product">
                                                <tr role="row" id="1" tabindex="-1"
                                                    class="jqgrow ui-row-ltr">
                                                    <td>${product.id}
                                                    </td>
                                                    <td>
                                                            ${product.product_name}
                                                    </td>
                                                    <td>
                                                        <c:if test="${product.status == 1}">
                                                            启用
                                                        </c:if>
                                                        <c:if test="${product.status == 2}">
                                                            停用
                                                        </c:if>
                                                    </td>
                                                    <td>
                                                        <a id="updBtn" proId="${product.id}" title="编辑"
                                                                productName="${product.product_name}"
                                                                class="handleicon" type="button">
                                                            <i class="fa fa-pencil-square-o"></i>
                                                       </a>

                                                        <!-- bug暂停和开始按钮 -->
                                                        <c:if test="${product.status==1}">

                                                            <a id="chbtn" proId="${product.id}"
                                                                    status="2" title="停用"
                                                                    class="handleicon" type="button"><i
                                                                    class="fa fa-lock"></i>
                                                    </a>
                                                        </c:if>

                                                        <c:if test="${product.status==2}">

                                                            <a id="chbtn" proId="${product.id}"
                                                                    status="1" title="启用"
                                                                    class="handleicon" type="button"><i
                                                                    class="fa fa-unlock"></i>
                                                    </a>
                                                        </c:if>

                                                        <a id="delBtn"
                                                                proId="${product.id}"
                                                                title="删除"
                                                                class="handleicon"
                                                                type="button">
                                                            <i class="fa fa-trash-o"></i>
                                                    </a>
                                                    </td>

                                                </tr>

                                            </c:forEach>


                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--添加产品div-->
<div id="addDiv" style="display: none">
    <form class="form-horizontal" id="demandForm" name="demandForm">
        <div class="form-group">
            <label class="col-sm-4 control-label">产品名称：</label>
            <div class="col-sm-7" style="margin-left: -20px">
                <input name="productName"
                       id="productName" type="text"
                       class="form-control">
                <span style="display: none;color: #cc5965;margin-left: 5px" id="erroSpan"
                      for="productName">请填写产品名称</span>

            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10" style="text-align: center;margin-top: 5px">
                <input value="提交" onclick="addPro(this)" class="btn  btn-primary" type="button" id="submitBtn">
                <button id="closeBut" onclick="closeWin()" class="btn  btn--white" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<!--弹框用-->

</body>

<script>
    function closeWin() {
        layer.closeAll();
    }

    function addPro(obj) {
        var productName = $(obj).parent().parent().parent().find("#productName").val();
        var id = $(obj).parent().parent().parent().find("#proId").val();
        if (null != productName && "" != productName.trim()) {
            $(obj).parent().parent().parent().find("#erroSpan").hide();
            var args = {
                "productName": productName,
                "id": id
            }

            var url = "addProduct.html";

            //加载进度条
            layer.load(2, {
                shade: [0.2, '#999999'] //0.1透明度的白色背景
            });
            $.post(url, args, function (data) {
                data = jQuery.parseJSON(data);
                //保存成功
                if (data.code == 1) {
                    window.location.reload();
                    layer.closeAll('loading');
                } else {
                    //失败
                    layer.alert(data.msg);
                    layer.closeAll('loading');
                }
            });

        } else {
            $(obj).parent().parent().parent().find("#erroSpan").show();
        }
    };


    $(function () {

        var index = 0;

        $("#addBtn").click(function () {
            var title = "增加产品";

            //alert($(this).html());
            //alert($(this).parent('tr').attr('custId'));
            index = layer.open({
                title: title,
                btn: false,
                skin: 'ilayui-layer-rm', //加上边框
                content: $("#addDiv").html()
            });
        });


        $("[id=updBtn]").click(function () {

            var strHtml = '    <form class="form-horizontal" id="demandForm" name="demandForm">\n' +
                '        <input type="hidden" id="proId" value="' + $(this).attr("proId") + '" class="form-group">\n' +
                '        <div class="form-group">\n' +
                '            <label class="col-sm-4 control-label">产品名称：</label>\n' +
                '            <div class="col-sm-7" style="margin-left: -20px">\n' +
                '                <input name="productName" value=' + $(this).attr("productName") +
                '                       id="productName" type="text"\n' +
                '                       class="form-control">\n' +
                '                <span style="display: none;color: #cc5965;margin-left: 5px" id="erroSpan"\n' +
                '                      for="productName">请填写产品名称</span>\n' +
                '\n' +
                '            </div>\n' +
                '        </div>\n' +
                '        <div class="form-group">\n' +
                '            <div class="col-sm-10" style="text-align: center;margin-top: 5px">\n' +
                '                <input value="提交" onclick="addPro(this)" class="btn  btn-primary" type="button" id="submitBtn">\n' +
                '                <button id="closeBut" onclick="closeWin()" class="btn  btn--white" type="button">关闭</button>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </form></div>';

            var title = "修改产品";

            //alert($(this).html());
            //alert($(this).parent('tr').attr('custId'));
            index = layer.open({
                title: title,
                btn: false,
                skin: 'ilayui-layer-rm', //加上边框
                content: strHtml
            });
        });

    });

    $(function () {


        $("[id=chbtn]").click(function () {
            var id = $(this).attr('proId');
            var status = $(this).attr('status');
            var title = "确定停用？";

            if (1 == status) {
                title = "确定启用？";
            }


            var obj = $(this);
            layer.msg(title, {
                time: 0 //不自动关闭
                , btn: ['确定', '取消']
                , yes: function (index) {


                    var args = {
                        "id": id,
                        "status": status
                    }

                    var url = "addProduct.html";

                    //加载进度条
                    layer.load(2, {
                        shade: [0.2, '#999999'] //0.1透明度的白色背景
                    });
                    $.post(url, args, function (data) {
                        data = jQuery.parseJSON(data);
                        //保存成功
                        if (data.code == 1) {
                            window.location.reload();
                            layer.closeAll('loading');
                        } else {
                            //失败
                            layer.alert(data.msg);
                            layer.closeAll('loading');
                        }
                    });
                    layer.close(index);

                }

            });
        });


        $("[id=delBtn]").click(function () {
            var id = $(this).attr('proId');
            var title = "确定删除？";

            var obj = $(this);
            layer.msg(title, {
                time: 0 //不自动关闭
                , btn: ['确定', '取消']
                , yes: function (index) {


                    var args = {
                        "id": id,
                    }

                    var url = "delProduct.html";

                    //加载进度条
                    layer.load(2, {
                        shade: [0.2, '#999999'] //0.1透明度的白色背景
                    });
                    $.post(url, args, function (data) {
                        data = jQuery.parseJSON(data);
                        //保存成功
                        if (data.code == 1) {
                            window.location.reload();
                            layer.closeAll('loading');
                        } else {
                            //失败
                            layer.alert(data.msg);
                            layer.closeAll('loading');
                        }
                    });
                    layer.close(index);

                }
            });
        });
    });
</script>
</html>
